﻿@using CleanArchitecture.Core.Helper
@using CleanArchitecture.Infrastructure.Models.Business.FileUpload
@model FileItemModel
@{
    Layout = "_BackendLayout";
    ViewData["Title"] = ViewBag.PageTitle as string;
    var AvailableFileType = ViewBag.AvailableFileType as IList<SelectListItem> ?? null;
    var AvailableStoreType = ViewBag.AvailableStoreType as IList<SelectListItem> ?? null;
}
@section cssstyles {
    <style type="text/css">
        .layui-upload-choose{ display:none; }
    </style>
}
<div class="layui-fluid layui-form" style="padding-top: 10px;">
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-inline">
            <input type="text" name="@Model.nameof(m => m.TitleAttribute)" value="@Model.TitleAttribute" lay-verify="required" placeholder="请输入资源标题" autocomplete="off" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注信息</label>
        <div class="layui-input-inline">
            <input type="text" name="@Model.nameof(m => m.AltAttribute)" value="@Model.AltAttribute" placeholder="请输入资源备注信息" autocomplete="off" class="layui-input" />
        </div>
    </div>
    @if (Model.Id == 0)
    {
        <div class="layui-form-item">
            <label class="layui-form-label">上传方式</label>
            <div class="layui-input-inline">
                <select asp-for="StoreType" asp-items="@AvailableStoreType" lay-verify="required">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文件类型</label>
            <div class="layui-input-inline">
                <select asp-for="Category" asp-items="@AvailableFileType" lay-verify="required" lay-filter="FileTypeSelect">
                </select>
            </div>
        </div>
    }

    <input type="text" name="@Model.nameof(m => m.Id)" value="@Model.Id" class="layui-hide" />
    <div class="layui-form-item">
        <div class="layui-input-block">
            @if (Model.Id == 0)
            {
                <button type="button" class="layui-btn layui-btn-normal" id="uploadfileBtn">选择文件</button>
            }

            <button type="button" class="layui-btn" id="submitBtn" lay-filter="fileItemSubmit" lay-submit="">
                保存提交
            </button>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        layui.use(['layer', 'form', 'element', 'notice', 'upload'], function () {
            var form = layui.form,
                element = layui.element,
                layer = layui.layer,
                notice = Util.notice !== null && Util.notice() !== null
                    ? Util.notice() : layui.notice,
                uploader = layui.upload;

            var $uploadBtn = $("#uploadfileBtn"),
                uploadInst = null;

            if ($uploadBtn.length > 0) {
                uploadInst = uploader.render({
                    elem: '#uploadfileBtn'
                    , url: ''
                    , auto: false
                    , data: {}
                    , accept: 'images'
                    , acceptMime: 'image/*'
                    , field: 'Form.Files'  //与后台BaseEntityModel.FormFile对应
                    , bindAction: '#submitBtn'
                    , choose: function (obj) {
                        obj.preview(function (index, file, result) {
                            layer.tips(file.name, '#uploadfileBtn',{ tips: 1 });
                        });
                    }
                    , done: function (res) {
                        layer.closeAll('loading'); //关闭加载层
                        if (res.state !== 200) notice.error(res.message);
                        else {
                            notice.success(res.message);
                            $("input[name=@Model.nameof(m => m.TitleAttribute)]").val("");
                            uploadInst.reload({
                                url:''
                                , data: {}
                            });
                        }
                    }
                });
                form.on('select(FileTypeSelect)', function (data) {
                    if (data.value.indexOf("Image") >= 0) {
                        uploadInst.reload({
                            accept: 'images'
                            , acceptMime: 'image/*'
                        });
                    } else if (data.value.indexOf("Video") >= 0) {
                        uploadInst.reload({
                            accept: 'video'
                            , acceptMime: 'video/*'
                        });
                    } else if (data.value.indexOf("Audio") >= 0) {
                        uploadInst.reload({
                            accept: 'audio'
                            , acceptMime: 'audio/*'
                        });
                    } else {
                        uploadInst.reload({
                            accept: 'file'
                            , acceptMime: '*'
                        });
                    }
                });
            }

            //提交保存
            form.on('submit(fileItemSubmit)', function (data) {
                var postData = data.field;
                if (postData.hasOwnProperty("Form.Files") && uploadInst != null) { //resource upload
                    //文件上传交给uploader
                    delete postData["Form.Files"];
                    uploadInst.reload({
                        url:'/api/backend/business/resourceupload'
                        , data: postData
                    });
                    layer.load(2, { time: 10 * 1000 });
                    uploadInst.upload(); 
                }
                else { //Edit:只修改资源名称属性
                    var index = layer.load(2, {time: 10*1000});
                    httpapi.fetchPost('/api/backend/business/resourcemanage/edit', postData).then(res => {
                        layer.close(index);
                        if (!httpapi.checkResponse(res))
                            //输入信息校验错误
                            notice.error(res.message);
                        else {//Success
                            notice.success(res.message);
                            Util.CloseMainWindow();
                        }
                    }).catch(error => console.error(error));
                }
                
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
    </script>
}